<template>
	<div class="loginbg">
		<div class="loginf">
			<div class="loginform">
				<div class="logintitle">
					<span>登录趣收银</span>
				</div>
				<el-input placeholder="店铺号" v-model="shop_sn">

				</el-input>
				<el-input placeholder="用户名" v-model="username">

				</el-input>
				<el-input placeholder="密码" v-model="userpwd">

				</el-input>
				<div style="text-align: left;padding: 10px 0px;">
					<el-checkbox v-model="checked">下次自动登录</el-checkbox>
				</div>
				</br>
				<el-button type="primary" v-on:click="loginfun">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				uin:'',
				shop_id:'',
				shop_name:'',  //name
				shop_sn: '', //电铺编号
				username: '', //用户名
				userpwd: '', //密码
				checked: true
			}
		},
		mounted() {
			this.onload();
		},
		methods: {
			onload: function() {
				
			},
			loginfun: function() {
				var p = {
					shop_sn: this.shop_sn,
					username: this.username,
					userpwd: this.userpwd
				};
				var qs = JSON.stringify(p);
				this.$http.post('/test/public/index.php/cash/child_login.qdy', {
					"data": qs
				}, {
					emulateJSON: true
				}).then(function(data) {
					console.log(data);
					this.uin = data.data.data.uin;
					this.token = data.data.data.token;
					this.shop_id = data.data.data.shop_id;
					this.shop_name =  data.data.data.shopname;
					this.setCookie("shop_name", this.shop_name, 8760);
					this.setCookie("uin", this.uin, 8760);
					this.setCookie("token", this.token, 8760);
					this.setCookie("shop_id", this.shop_id, 8760);
					this.setCookie("username", this.username, 8760);
					this.open3();
					
					setTimeout(this.router, 2000);
				}, function(response) {
					// 响应错误回调
					if(response.data.code == 4047) {
						this.open4("账号密码错误");
					} else if(response.data.code == 4031) {
						this.open4("账号未注册，请先注册账号");
					}
				});
			},
			router: function() {
				this.$router.push({ path: '/' })
			},
			//设置cookie
			setCookie: function(c_name, c_pwd, exdays) {
				var exdate = new Date(); //获取时间
				exdate.setTime(exdate.getTime() + 60 * 60 * 1000 * exdays); //小时
				//字符串拼接cookie
//				window.document.cookie = "uin" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
//				window.document.cookie = c_name + "=" + c_pwd + "; " + exdate.toGMTString();
				document.cookie = c_name + ("=" + (c_pwd) + ";expires=" + exdate.toGMTString() + ";path=/;");
			},
			//读取cookie
			getCookie: function(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i = 0; i < ca.length; i++) {
					var c = ca[i];
					while(c.charAt(0) == ' ') c = c.substring(1);
					if(c.indexOf(name) != -1) return c.substring(name.length, c.length);
				}
				return "";
			},
			//清除cookie
			clearCookie: function() {
				this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
			},
			open3: function(txt) {
		        this.$notify({
		          title: '登录成功',
		          duration:2000,
		          message: '登录成功！',
		          type: 'success'
		        });
		    }
		}
	}
</script>

<style>
	.loginform {
		float: right;
		margin-right: -150px;
		width: 350px;
		height: 420px;
		background-color: white;
		border-radius: 5px;
		padding: 15px 25px;
		-webkit-box-shadow: #666 0px 0px 10px;
		-moz-box-shadow: #666 0px 0px 10px;
		box-shadow: #666 0px 0px 10px;
		animation: loginformanimet 0.5s forwards;
		
	}
	
	@keyframes loginformanimet {
		from {
			margin-right: -150px;
		}
		to {
			margin-right: 150px;
		}
	}
	
	#Mycanvas {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 5;
	}
	
	.loginf {
		position: absolute;
		top: 150px;
		z-index: 20;
		width: 100%;
		overflow: hidden;
		margin-top: 0px;
		overflow: hidden;
		padding: 10px 0px;
	}
	
	.loginbg {
		width: 100%;
		height: 100%;
		position: relative;
		top: 0px;
		background-color: white;
	}
	
	.el-button--primary {
		width: 100%;
	}
	
	.logintitle {
		width: 100%;
		line-height: 45px;
		text-align: left;
		font-weight: 600;
		color: #409EFF;
	}
	
	.loginform .el-input{
		margin: 10px auto;
	}
	.loginform .el-input>.el-input__inner{
		height: 40px;
	}
</style>